<template>
    <div class="login">
        <div class="content">
            <a-form :model="formState" name="basic" :label-col="{ span: 6}" :wrapper-col="{ span: 12 }" autocomplete="off"
                @finish="onFinish" 
                @finishFailed="onFinishFailed">
                <a-form-item label="账号" name="username"
                    :rules="[{ required: true, message: '请输入账号!' }]">
                    <a-input v-model:value="formState.username" />
                </a-form-item>

                <a-form-item label="密码" name="password"
                    :rules="[{ required: true, message: '请输入密码！' }]">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>

                <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 16 }">
                    <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script  setup>
import {$login} from '../api/login'
import { reactive } from "vue"
import {useRouter} from 'vue-router'
let $router = useRouter()

//表单数据
const formState = reactive({
    username: "",
    password: "",
    remember: false,
})
const onFinish = async (values) => {
    let {username,password,remember} = values
     let ret = await $login({username,password})
     if(ret){
        $router.push('/layout')
     } 
    console.log(remember);
};

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

</script>
<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, rgb(35, 94, 172), rgb(200, 235, 250));
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        padding: 20px;
        width: 500px;
        height: 200px;
        border: 1px solid #fff;
        padding-bottom: 0;
        border-radius: 6px;
    }
}
</style>